<template>
  <div id="app">
    <h2>{{ obj.num }}</h2>
    <button @click="add">++</button> <br />
    <h2>{{ arr }}</h2>
    <button @click="add2">++</button>
    <!-- <div class="box"> -->
    <!-- <h4>num -- {{ c.num }}</h4> -->
    <!-- <h4>allNum -- {{ allNum }}</h4> -->
    <!-- <button @click="c.num++">加一</button> -->
    <!-- </div> -->
    <router-view />
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      obj: {
        num: 100,
      },
      arr: [11, 22, 33, 44],
    };
  },
  methods: {
    add() {
      this.$delete(this.obj, "num");
      // Vue.set(this.obj, "num", this.obj.num * 10);
      // this.$set(this.obj, "num", this.obj.num * 10);
    },
    add2() {
      // this.$set(this.arr, 0, 100000);
      this.arr.splice(3, 1, 10000);
    },
  },
  computed: {
    // allNum() {
    //   return this.num % 2 == 0 ? this.num * 10 : "oh yeah";
    // },
  },
  watch: {
    // "c.num"(newVal, oldVal) {
    //   //可以欧，监听对象里的一项这样写
    //   console.log(newVal, oldVal);
    // },
    // c: {
    //   handler(newVal) {
    //     console.log(newVal.num);
    //   },
    //   immediate: true,
    //   deep:true
    // },
    // num(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    // $route: { //只能监听到子路由，所以丢到app.vue
    //   handler(newVal, oldVal) {
    //     console.log(newVal.name, oldVal?.name);
    //   },
    //   immediate: true,
    // },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

html,
body,
#app {
  height: 100%;
}
.h100 {
  height: 100%;
}
// 纵向移动动画
.slide-enter,
.slide-leave-to {
  transform: translateY(100%);
}
.slide-enter-to,
.slide-leave {
  transform: translateY(0);
}
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s linear;
}
// 横向移动动画
.move-enter,
.move-leave-to {
  .mask {
    opacity: 0;
  }
  transform: translateX(100%);
}
.move-enter-to,
.move-leave {
  .mask {
    opacity: 1;
  }
  transform: translateX(0);
}
.move-enter-active,
.move-leave-active {
  .mask {
    transition: opacity 0.3s linear;
  }
  transition: transform 0.3s linear;
}
</style>
